import { createElement, Fragment, ReactNode, type FC } from 'react';

import { accordionPanelDefaultProps } from './defaultProps';
import type { AccordionPanelContentProps, AccordionPanelOptions, AccordionPanelTitleProps } from './type';
import AccordionTitle from './AccordionTitle';
import AccordionContent from './AccordionContent';

export type AccordionPanelProps = AccordionPanelOptions;

const AccordionPanel: FC<AccordionPanelProps> = (props) => {
  const { active, id, title, content, children } = props;

  return createElement(Fragment, undefined, [
    createElement(
      AccordionTitle,
      { key: 'title', className: (title as AccordionPanelTitleProps)?.className, active, target: id },
      (title as AccordionPanelTitleProps)?.children || (title as ReactNode),
    ),
    createElement(
      AccordionContent,
      { key: 'content', className: (content as AccordionPanelContentProps)?.className, active, id },
      children || (content as AccordionPanelContentProps)?.children || (content as ReactNode),
    ),
  ]);
};

AccordionPanel.displayName = 'AccordionPanel';
AccordionPanel.defaultProps = accordionPanelDefaultProps;

export default AccordionPanel;
